<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

  <link rel="stylesheet" href="./css/xadmin.css">
  <!-- advimg 样式 -->
  <link rel="stylesheet" href="./css/advimg.css">
</head>

<body>
  <!-- 顶部页面导航 -->
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">`
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>


  <!-- 内容区域 -->
  <div class="layui-fluid">
    <div class="layui-panel">
      <!-- 1. form -->
      <form class="layui-form search" action="" id="sousuo">
        <!-- 广告位 -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告图描述</label>
          <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input" id="tags">
          </div>
        </div>
        <!-- 广告图位置 -->
        <div class="layui-form-item">
          <div class="kuan">
            <label class="layui-form-label">广告图位置</label>
          </div>
          <div class="layui-form-item layui-inline">
            <select name="advimgpos">
              <option value="">请选择广告位</option>
              <!-- <option value="首页小广告位" id="qq">首页小广告位</option> -->
              <!-- <option value="广告123">广告123</option> -->
            </select>
          </div>
        </div>
        <!-- 搜索重置按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block btns">
            <!-- 搜索按钮 -->
            <button class="layui-btn submit" lay-submit lay-filter="formDemo">
              <i class="layui-icon layui-icon-search"></i>
              搜索
            </button>
            <!-- 重置按钮 -->
            <button type="reset" class="layui-btn layui-btn-primary reset" id="SX">
              <i class="layui-icon layui-icon-refresh"></i>
              重置
            </button>
          </div>
        </div>
      </form>

      <!--  2. 新增、导出按钮 -->
      <div class="list">
        <!-- left -->
        <div class="left">
          <!-- 新增按钮 -->
          <button class="add xinzeng">
            <i class="layui-icon  layui-icon-add-1"></i>
            新增
          </button>
          <!-- 导出按钮 -->
          <button class="exprot">
            <i class="layui-icon  layui-icon-print"></i>
            导出
          </button>
        </div>
        <!-- right -->
        <ul class="right">
          <li id="close">
            <i class="layui-icon layui-icon-up"></i>
          </li>
          <li style="display: none;" id="open">
            <i class="layui-icon layui-icon-down"></i>
          </li>
          <li id="sx">
            <i class="layui-icon layui-icon-refresh"></i>
          </li>
          <li id="filter">
            <i class="layui-icon layui-icon-app"></i>
            <i class="layui-icon layui-icon-app tubiao2" style="display: none;"></i>
          </li>
        </ul>
      </div>

      <!-- 点击filter小图标出现的框架 -->
      <dl style="display: none;" class="dl2">
        <dt>
          <i class="layui-icon layui-icon-component"></i>
          <input type="checkbox" class="checkall">
          <span>广告图位</span>
        </dt>
        <dt>
          <i class="layui-icon layui-icon-component"></i>
          <input type="checkbox" class="checkall">
          <span>广告图描述</span>
        </dt>
        <dt>
          <i class="layui-icon layui-icon-component"></i>
          <input type="checkbox" class="checkall">
          <span>广告图</span>
        </dt>
        <dt>
          <i class="layui-icon layui-icon-component"></i>
          <input type="checkbox" class="checkall">
          <span>广告图链接</span>
        </dt>
      </dl>

      <!--  3. table -->
      <table class="layui-table">
        <colgroup>
          <col width="50">
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>#</th>
            <th class="flt" data-id="isadvposname">广告图位</th>
            <th class="flt" data-id="isadvimgdesc">广告图描述</th>
            <th class="flt" data-id="isadvimgsrc">广告图</th>
            <th class="flt" data-id="isadvimglink">广告图链接</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>xxxx</td>
            <td>xx</td>
            <td>xxx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn">删除</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn">删除</button>
            </td>
          </tr> -->
        </tbody>
      </table>

      <!--  4.分页器 -->
      <div id="page-box"></div>

    </div>
  </div>


  <!-- editCateTpl编辑图标弹出框 -->
  <script type="text/html" id="editCateTpl">
  <form class="layui-form" id="form-edit" lay-filter="formEdit">
    <label class="layui-form-label">广告图位置</label>
    <div class="layui-form-item layui-inline">
      <select name="advimgpos" >
        <option value="">请选择广告位</option>
      </select>
    </div>

    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <label class="layui-form-label">广告图描述</label>
      <div class="layui-input-block">
        <input type="text" name="advimgdesc" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
          class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">广告图链接</label>
      <div class="layui-input-block">
        <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
          class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">广告图</label>
        <!-- 右侧预览区域和选择封面区域 -->
        <div class="cover-right">
    
          <!-- 预览的区域 -->
          <div class="img-preview"></div>
          <!-- 选择封面按钮 -->
          <button type="button" class="layui-btn layui-btn-danger" id="chooseImgBtn">选择封面</button>
          <!-- file文件上传 -->
          <input type="file" id="file" >
          <!-- 图片框 -->
          <div class="cover-left"  style="display: none;">
            <img id="image" src="" alt="" />
          </div>
        </div>
    </div>
    <!-- 发布按钮区域 -->
    <button class="layui-btn juli" lay-submit>立即提交</button>
    <button type="type" class="layui-btn luli">取消</button>

  </form>
  </script>

</body>

<script src="./lib/layui/layui.all.js"></script>
<script src="./js/xadmin.js"></script>
<script src="./js/jquery.min.js"></script>
<!-- 统一配置 -->
<script src="./js/ajaxBase1.js"></script>
<script src="./js/advimg.js"></script>

</html>